<template>
  <div class="apple-modal" v-if="visible">
    <div class="modal-overlay" @click="closeModal"></div>
    <div class="modal-container glass-effect">
      <div class="modal-header">
        <h2>修改密码</h2>
        <button class="close-button" @click="closeModal">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-section">
          <div class="form-group">
            <label for="oldPassword">当前密码</label>
            <input 
              type="password" 
              id="oldPassword" 
              v-model="passwordForm.oldPassword"
              placeholder="请输入当前密码"
              class="apple-input"
            />
          </div>
          
          <div class="form-group">
            <label for="newPassword">新密码</label>
            <input 
              type="password" 
              id="newPassword" 
              v-model="passwordForm.newPassword"
              placeholder="请输入新密码"
              class="apple-input"
            />
          </div>
          
          <div class="form-group">
            <label for="confirmPassword">确认新密码</label>
            <input 
              type="password" 
              id="confirmPassword" 
              v-model="passwordForm.confirmPassword"
              placeholder="请再次输入新密码"
              class="apple-input"
            />
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="apple-button" @click="closeModal">取消</button>
        <button class="apple-button apple-button-primary button-float" @click="submitForm">保存</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { usersApi } from '../../utils/apiService'
import { useUserStore } from '../../stores/user'

// 定义props
const props = defineProps({
  visible: Boolean
})

// 定义事件
const emit = defineEmits(['close', 'success'])

// 获取用户store
const userStore = useUserStore()

// 表单数据
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单验证
const validateForm = () => {
  if (!passwordForm.value.oldPassword) {
    ElMessage.error('请输入当前密码')
    return false
  }
  
  if (!passwordForm.value.newPassword) {
    ElMessage.error('请输入新密码')
    return false
  }
  
  if (passwordForm.value.newPassword.length < 6) {
    ElMessage.error('新密码长度不能少于6位')
    return false
  }
  
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    ElMessage.error('两次输入的新密码不一致')
    return false
  }
  
  return true
}

// 提交表单
const submitForm = async () => {
  if (!validateForm()) return
  
  try {
    const userId = userStore.user?.id
    if (!userId) {
      ElMessage.error('无法获取用户信息，请重新登录')
      return
    }
    
    const passwordData = {
      userId: userId,
      oldPassword: passwordForm.value.oldPassword,
      newPassword: passwordForm.value.newPassword
    }
    
    const response = await usersApi.changePassword(passwordData)
    
    if (response && response.code === 200) {
      ElMessage.success('密码修改成功')
      resetForm()
      emit('success')
      emit('close')
    } else {
      ElMessage.error(response?.msg || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码出错:', error)
    ElMessage.error(error.response?.data?.msg || '密码修改失败，请检查当前密码是否正确')
  }
}

// 重置表单
const resetForm = () => {
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
}

// 关闭弹窗
const closeModal = () => {
  resetForm()
  emit('close')
}

// 监听可见性变化，当弹窗关闭时重置表单
watch(() => props.visible, (newVal) => {
  if (!newVal) {
    resetForm()
  }
})
</script>

<style scoped>
/* 弹窗样式 继承消息通知样式 */
.apple-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.modal-container {
  position: relative;
  width: 90%;
  max-width: 500px;
  border-radius: 16px;
  overflow: hidden;
  animation: modalAppear 0.3s ease;
  background-color: white;
}

.dark-mode .modal-container {
  background-color: #1c1c1e;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
}

.dark-mode .modal-header {
  border-bottom: 1px solid #3a3a3c;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #8e8e93;
}

.dark-mode .close-button {
  color: #98989d;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #e6e6e6;
}

.dark-mode .modal-footer {
  border-top: 1px solid #3a3a3c;
}

.form-section {
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #1d1d1f;
}

.dark-mode .form-group label {
  color: #f5f5f7;
}

.apple-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #d1d1d6;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.apple-input:focus {
  outline: none;
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.3);
}

.dark-mode .apple-input {
  background-color: #2c2c2e;
  border-color: #3a3a3c;
  color: #f5f5f7;
}

.dark-mode .apple-input:focus {
  border-color: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.3);
}

/* 按钮样式 */
.apple-button {
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  background-color: #f5f5f7;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apple-button:hover {
  background-color: #e6e6e6;
}

.apple-button-primary {
  background-color: #0071e3;
  color: white;
}

.apple-button-primary:hover {
  background-color: #0058b0;
}

.dark-mode .apple-button {
  background-color: #3a3a3c;
  color: #f5f5f7;
}

.dark-mode .apple-button:hover {
  background-color: #4e4e50;
}

.dark-mode .apple-button-primary {
  background-color: #0a84ff;
}

.dark-mode .apple-button-primary:hover {
  background-color: #0051d4;
}

.button-float:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dark-mode .button-float:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
</style> 